<template>
    <div class="physicalroom-gallery">
        <Loading :show="loading"></Loading>
        <div class="panel">
            <div class="panel-body">
                <MySelect
                        id="pid"
                        v-model="pid"
                        :options="[]"
                        :searchable="true"
                        :ajax="ajaxConf"
                        minimumInputLength="2"
                        placeholder="physical_room_id"
                >
                </MySelect>
            </div>
        </div>
        <div class="panel" v-if="data">
            <div class="panel-heading">{{data.physical_room_id}}</div>
            <div class="panel-body">
                <v-gallery :images="data.room_photos_hook" :caption="false" v-if="data && data.room_photos_hook.length">
                    <a :key="'img' + index"  class="img-box" href="javascript:void(0);"
                       :data-image="img.url"
                       :title="img.title"
                       v-for="(img, index) in data.room_photos_hook">
                        <div class="bgbox">
                            <img :src="img.url">
                        </div>
                        <div class="img-title" v-html="img.title"></div>
                        <button type="button" class="close btn btn-danger btn-circle btn-sm"
                                @click.stop="removeImg(img.id)"
                        >
                            <i class="fif fif-close text-white"></i>
                        </button>
                    </a>
                </v-gallery>
                <vue2-dropzone ref="myVueDropzone2" id="myVueDropzone2" :options="dropzoneOptions"
                               @vdropzone-files-added="addedFiles"
                >
                </vue2-dropzone>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import vGallery from 'v-gallery';
    import vue2Dropzone from 'vue2-dropzone'
    import Loading from '@/components/widgets/Loading'
    import MySelect from '@/components/widgets/MySelect'
    import {getAjaxConf} from "@/utils";
    import {searchModel, updateModel} from "@/api/model";
    import {getUploadInfo, uploadFileToOss, notifyFileUploadComplete} from "@/api/upload";

    Vue.use(vGallery);

    export default {
        name: "PhysicalRoomGallery",
        components: {Loading, vue2Dropzone, MySelect},
        data() {
            return {
                pid: '',
                loading: false,
                data: {
                    room_photos_hook: []
                }
            }
        },
        created() {
            this.ajaxConf = getAjaxConf('PhysicalRoom', 'id', 'physical_room_id')
            this.dropzoneOptions = {
                url: 'https://httpbin.org/post',
                acceptedFiles: 'image/*',
                thumbnailWidth: 150,
                maxFilesize: 0.5,
                autoProcessQueue: false,
                addRemoveLinks: true,
                dictRemoveFile: 'X',
                resizeWidth: 100
            }
            this.files = []
        },
        methods: {
            handleURL(str) {
                this.currentCloudFileIDs = []
                let objArr = JSON.parse(str.replace(/\'/g, '"'))
                let imagesURLs = []
                objArr.forEach(item => {
                    this.currentCloudFileIDs.push(item.id)
                    imagesURLs.push({id:item.id, url: item.url.url})
                })
                return imagesURLs
            },
            fetch() {
                if (this.pid) {
                    searchModel('PhysicalRoom', {
                        search_keys: {
                            id: this.pid
                        }
                    }).then(res => {
                        this.loading = false
                        if (res.data.list.length) {
                            this.data = {room_photos_hook: []}
                            this.$nextTick(() => {
                                res.data.list[0].room_photos_hook = this.handleURL(res.data.list[0].room_photos_hook)
                                this.data = res.data.list[0]
                            })
                            this.files = []
                            this.$refs.myVueDropzone2.removeAllFiles()
                        } else {
                            this.data = null
                        }
                    }).catch(e => this.loading = false)
                }
            },
            // 删除图片
            removeImg(id) {
                let index = this.currentCloudFileIDs.indexOf(id)
                if (index !== -1) {
                    this.currentCloudFileIDs.splice(index, 1)
                    this.loading = true
                    updateModel('PhysicalRoom', this.pid, {
                        room_photos_hook: this.currentCloudFileIDs
                    }).then( res => {
                        this.loading = false
                        this.fetch()
                    } )
                }
            },
            // 添加完后直接上传
            addedFiles(files) {
                if (!this.pid) {
                    return this.$refs.myVueDropzone2.removeAllFiles()
                }
                this.tmpFiles = []
                for (let i = 0; i < files.length; i++) {
                    this.tmpFiles.push(files[i])
                }
                this.loading = true
                this.cloudFileIDs = []
                for (let i = 0; i < files.length; i++) {
                    let file = files[i]
                    getUploadInfo({
                        file_name: 'physical/' + file.name,
                        storage_type: 'PRIVATE',
                        file_size: file.size
                    }).then(res => {
                        let cloud_file_id = res.data.cloud_file_id
                        uploadFileToOss(file, res.data).then(res => {
                            if (cloud_file_id) {
                                notifyFileUploadComplete({file_id: cloud_file_id}).then(res => {
                                    this._removeFileArr(this.tmpFiles, file.upload.uuid)
                                    this.cloudFileIDs.push(cloud_file_id)
                                    if (res.status == 200) {
                                        if (!this.tmpFiles.length) {
                                            updateModel('PhysicalRoom', this.pid, {
                                                room_photos_hook: this.cloudFileIDs
                                            }).then(res => {
                                                this.fetch()
                                            })
                                        }
                                    } else {
                                        this.loading = false
                                    }
                                })
                            }
                        }).catch(e => this.loading = false)
                    })
                }
            },
            _removeFileArr(arr, uuid) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].upload.uuid === uuid) {
                        arr.splice(i, 1)
                        break;
                    }
                }
            },

        },
        watch: {
            pid() {
                this.fetch()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .physicalroom-gallery
        .img-box
            border: 1px solid #ddd;
            padding: 5px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            margin: 0 10px 10px 0;
            position: relative;
            display: inline-block;
            background-color: #fff;
            vertical-align: middle;
            transition: all .3s;
            -webkit-transition: all .3s;
            border-radius: 2px;
            text-decoration: none;
            &:hover
                border: 1px solid #aaa;
                box-shadow: 0 1px 8px rgba(0, 0, 0, .5);
            .close
                position: absolute;
                right: -16px;
                top: -15px;
                z-index: 999;
            .bgbox
                display: table-cell;
                vertical-align: middle;
                height: 120px;
                background-color: #000;
                img
                    width: 160px;
                    display: block;
                    vertical-align: middle;
</style>